<template>
  <div class="page">
    <div class="nav-bar flex-row">
      <div class="logo">
        Mtime
      </div>
      <div class="nav-item">首页</div>
      <div class="nav-item actived">
        电影
      </div>
      <div class="nav-item">原创</div>
      <div class="nav-item">榜单</div>
      <div class="nav-item">社区</div>
      <div class="nav-item">视频</div>
    </div>
    <div class="color-background"></div>
    <div class="search-box">
      <div class="search-content flex-row">
        <div class="all-button">全部</div>
        <div class="iconfont icon-xia"></div>
        <div class="split-v"></div>
        <input class="keyword" type="text" placeholder="搜索电影、影人、文章、用户、家族" />
        <div class="iconfont icon-search"></div>
      </div>
    </div>
    <div class="page-content flex-column">

      <div class="content-menu flex-row">
        <div class="menu-item actived">影视</div>
        <div class="menu-item">影人</div>
        <div class="menu-item">内容</div>
        <div class="menu-item">用户</div>
        <div class="menu-item">家族</div>
      </div>
      <div class="selected-box page-box flex-row">
        <div class="box-label">
          已选择：
        </div>
        <div class="selected-items flex-row">
          <div class="selected-item">
            剧情
            <div class="iconfont icon-delete"></div>
          </div>
          <div class="selected-item">
            2021年
            <div class="iconfont icon-delete"></div>
          </div>
        </div>
      </div>
      <div class="split-line"></div>
      <div class="types-box page-box flex-row">
        <div class="box-label">
          类型：
        </div>
        <div class="type-items flex-row">
          <div class="type-item" v-for='typeItem in typeList' :key='typeItem.id'
            :class="{'actived':typeItem.name==currentType.name}" @click="clickType(typeItem.id)">
            {{typeItem.name}}
          </div>
        </div>
      </div>
      <div class="split-line"></div>
      <div class="years-box page-box flex-row">
        <div class="box-label">
          年代：
        </div>
        <select class="year-select" v-model='currentYear' @change='selectYear()'>
          <option class="year-item" v-for="item in yearList" :key='item.movieYear' :value='item.movieYear'>
            {{item.movieYear}}年
          </option>
        </select>
      </div>
      <div class="split-line"></div>
      <div class="page-box total-text flex-row">
        <div class="box-label">相关影视：</div>
        <div class="number">{{totalCount}}</div>个
      </div>
      <div class="movie-box page-box flex-column">
        <div class="movie-item" v-for='item in movieList' :key='item.movieId'>
          <div class="movie-ratio-box">
            <div class="ratio-label">总评分</div>
            <div class="ratio-value">{{parseFloat(item.rating).toFixed(1)}}</div>
          </div>
          <div class="movie-info-box">
            <div class="movie-title">{{item.name}} {{item.nameEn}} （{{item.movieYear}}）</div>
            <div class="movie-info">
              <div class="movie-image">
                <img :src="item.img" />
              </div>
              <div class="movie-detail">
                <div class="line-text">{{item.length}}分钟 - 类型： {{item.typeName.split(',').join('/')}}</div>
                <div class="line-text">导演： {{item.directorName}}</div>
                <div class="line-text">主演： {{item.actorsName.split(',')[0]}}</div>
                <div class="movie-button">
                  <router-link :to="{
                    name: 'movie-detail',
                    params: {
                      id: item.movieId,
                    }
                  }">查看详情
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-box flex-row" id="pagingBox">
        <!-- 向前一页按钮 -->
        <div class="last-button" v-if="!isFirst" @click="changePage(pageIndex-1)">&lt;</div>
        <!-- 第一页按钮 -->
        <div class="number-button" :class="{actived:pageIndex==0}" @click="changePage(0)">1</div>
        <!-- 向前一组分页按钮 -->
        <div class="number-button" v-if="pageIndex>(1+pagebuttonsCount)"
          @click="changePage(pageIndex-pagebuttonsCount-1)">...</div>
        <!-- 根据当前页变化的一组分页按钮 -->
        <div class="number-button" :class="{actived:pageIndex==(pageNumber-1)}" v-for="pageNumber in pagebuttons"
          :key="pageNumber" @click="changePage(pageNumber-1)">{{pageNumber}}
        </div>
        <!-- 向后一组分页按钮 -->
        <div class="number-button" v-if="pageIndex<totalPage-pagebuttonsCount"
          @click="changePage(pageIndex+pagebuttonsCount-1)">...</div>
        <!-- 最后一页按钮 -->
        <div class="number-button" :class="{actived:pageIndex==totalPage-1}" @click="changePage(totalPage-1)">
          {{totalPage}}</div>
        <!-- 向后一页按钮 -->
        <div class="next-button" v-if="!isLast" @click="changePage(pageIndex+1)">&gt;</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      typeList: [],     // 类型列表
      yearList: [],     // 年份列表
      currentType: '',  // 当前选择分离
      currentYear: '',  // 当前选择的年份
      keyword: '',      // 查询关键字
      movieList: [],    // 影片列表
      pageIndex: null,  // 页码
      pageSize: 10,     // 页长
      totalCount: 0,    // 记录总数
      totalPage: 0,     // 页码总数
      isFirst: false,   // 是否第一页
      isLast: false,    // 是否最后一页
      pagebuttonsCount: 5,  // 分页器默认长度
      pagebuttons: [],  // 分页器按钮数组
    }
  },
  methods: {
    async loadAllTypes () {
      let resp = await this.$api.movie.getAllTypes()
      if (resp) {
        this.typeList = resp.data
      }
    },
    async loadAllYear () {
      let resp = await this.$api.movie.getAllYear()
      if (resp) {
        this.yearList = resp.data
      }
    },
    clickType (id) {
      console.log("被点击的分类：", id);
      this.currentType = id
      //触发查询，调用影片列表方法
      this.changePage(0);
    },
    selectYear () {
      console.log("被选择的年份：", this.currentYear);
      //触发查询，调用影片列表方法
      this.changePage(0);
    },
    //移除已选择条件，将分类或者年份重置位空
    removeYear () {
      this.currentYear = "";
      this.changePage(0);
    },
    removeType () {
      this.currentType = "";
      this.changePage(0);
    },
    dokeywordSearch () {
      this.changePage(0);
    },
    async loadMovieList (pageIndex, callback) {
      let params = {}
      if (this.currentType != "") {//如果指定了分类，拼接分类参数
        params["categories"] = this.currentType.typeId;
      }
      if (this.currentYear != "") {//如果指定了年份，拼接年份参数
        params["movie_year"] + this.currentYear;
      }
      if (this.keyword != "") {//如果输入了关键字，拼接关键字参数
        params["keyword"] = this.keyword
      }
      params["pageNum"] = pageIndex;//拼接指定的页码
      params["pageSize"] = this.pageSize;

      if (pageIndex == 0 || pageIndex != this.pageIndex) {//如果请求页码不相同，表示请求新的一页数据
        //发送请求
        let response = await this.$api.movie.getMovieList(params)
          .catch(error => { console.error("获取影片数据发生错误", error) })

        if (response.status == 200) {
          this.pageIndex = pageIndex;//数据获取成功，设置当前页。
          if (response.data && response.data.content) {
            //将分页数组赋值给movieList
            this.movieList = response.data.content;
            //将分页信息赋值给对应变量
            this.totalCount = response.data.totalElements;
            this.totalPage = response.data.totalPages;
            this.isFirst = response.data.first;
            this.isLast = response.data.last;
            if (callback) {
              callback();
            }
          }
        }
      }
    },
    changePage (page) {
      //发起加载数据，为loadMovieList方法添加回调函数参数，当数据加载完成后，对分页器进行渲染
      this.loadMovieList(page, () => {
        if (this.totalPage > this.pagebuttonsCount + 2) {//总页数超过分页器需要显示的最少元素
          if (page < (1 + this.pagebuttonsCount)) {//如果是前几页
            let arr = [];
            for (let i = 0; i < this.pagebuttonsCount; i++) {
              arr.push(i + 2);
            }
            this.pagebuttons = arr//构造前几页的页码数组，即2~6页
          } else if (page > (this.totalPage - this.pagebuttonsCount)) { //如果是后几页
            let arr = [];
            for (let i = this.pagebuttonsCount; i > 0; i--) {
              arr.push(this.totalPage - (i));
            }
            this.pagebuttons = arr
          } else { //中间页码
            let n = parseInt(this.pagebuttonsCount / 2);
            let arr = [];
            for (let i = n; i > 0; i--) {
              arr.push(page + 1 - i);
            }
            arr.push(page + 1);
            for (let i = 1; i <= n; i++) {
              arr.push(page + 1 + i);
            }
            this.pagebuttons = arr;
          }
        } else {//总页数在分页器显示元素个数以内
          let arr = [];
          for (let i = 0; i < this.totalPage - 2; i++) {
            arr.push(i + 2);
          }
          this.pagebuttons = arr;
        }
        console.log("分页数组：", this.pagebuttons);
      });
    }
  },
  mounted () {
    //调用获取全部分类数据的方法
    this.loadAllTypes().catch(e => {
      console.log("获取分类出现异常：" + e.message)
    })
    //调用获取全部年份数据的方法
    this.loadAllYear().catch(e => {
      console.log("获取年份出现异常：" + e.message)
    })
    this.changePage(0);
  },
}
</script>

<style scoped>
@import url('//at.alicdn.com/t/font_2863451_npexvzpdos.css');

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body {
  padding: 0;
  margin: 0;
}

.page {
  width: 100%;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-bar {
  width: 100%;
  background-color: #1e2736;
  height: 60px;
  color: rgba(200, 200, 200, 1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.nav-bar .logo {
  font-size: 200%;
  font-weight: bold;
  margin-left: 10%;
  margin-right: 60px;
  color: #fff;
}

.nav-item {
  width: 80px;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}

.nav-item.actived {
  color: #fff;
  font-weight: 500;
}

.nav-item.actived:after {
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: #fff;
  position: absolute;
  bottom: -20px;
  left: 8px;
}

.color-background {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: #127bab;
  height: 300px;
}

.page-content {
  width: 80%;
  background-color: #fff;
  overflow-y: auto;
  z-index: 5;
  margin-top: 100px;
  position: relative;
  padding-top: 60px;
}

.search-box {
  width: 50%;
  height: 60px;
  margin: 0 auto;
  background-color: #127bab;
  padding: 10px;
  position: absolute;
  top: 120px;
  left: 25%;
  border-radius: 40px;
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box .search-content {
  width: calc(100% - 10px);
  height: 50px;
  border-radius: 25px;
  background-color: #fff;
}

.search-box .search-content .all-button {
  margin-left: 20px;
  width: 60px;
  text-align: center;
  color: #33334d;
}

.search-box .search-content .icon-xia {
  margin-right: 20px;
}

.search-box .search-content .split-v {
  height: 30%;
  border-left: 1px solid rgba(200, 200, 200, 1);
  margin-right: 20px;
}

.search-box .search-content .keyword {
  height: calc(100% - 2px);
  border: none;
  flex: 1;
}

.keyword:focus {
  outline: none;
}

.search-box .search-content .icon-search {
  width: 40px;
  font-size: 150%;
  cursor: pointer;
}

.content-menu {
  width: calc(100% - 100px);
  padding: 0 50px;
  border-bottom: 1px solid rgba(200, 200, 200, 0.9);
  margin-bottom: 20px;
}

.content-menu .menu-item {
  padding: 10px 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.content-menu .menu-item.actived {
  border-bottom: 2px solid #df4706;
}

.page-box {
  margin-left: 50px;
  margin-right: 50px;
  padding: 20px 0;
  border-bottom: 1px dotted rgba(200, 200, 200, 0.5);
  align-items: flex-start;
}

.page-box .box-label {
  width: 100px;
  flex-shrink: 0;
  color: #333;
}

.selected-item {
  border: 1px solid #0087e2;
  color: #0087e2;
  padding: 5px 10px;
  background-color: #ecf5ff;
  margin-right: 15px;
  border-radius: 4px;
  position: relative;
  padding-right: 30px;
}

.selected-item .icon-delete {
  width: 20px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  top: calc((100% - 20px) / 2);
  right: 5px;
  color: #0087e2;
  cursor: pointer;
}

.type-items {
  flex-wrap: wrap;
  align-items: flex-start;
}

.type-items .type-item {
  margin-right: 10px;
  margin: 0px 25px 25px 0px;
  color: #4e5e73;
}

.type-items .type-item.actived {
  color: #20a0da;
}

.years-box {
  align-items: center;
}

.year-select {
  width: 200px;
  padding: 0 10px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(200, 200, 200, 0.5);
  cursor: pointer;
}

.year-select:focus {
  outline: none;
}

.movie-item {
  padding-left: 90px;
  position: relative;
  zoom: 1;
  margin-bottom: 40px;
}

.movie-item .movie-ratio-box {
  position: absolute;
  left: 20px;
  top: 33px;
  width: 55px;
  height: 55px;
  text-align: center;
  background: #679c21;
  color: #fff;
}

.movie-item .movie-ratio-box .ratio-label {
  padding: 4px 0 0;
  font-weight: 400;
  font-size: 12px;
  display: inline-block;
}

.movie-item .movie-ratio-box .ratio-value {
  font-size: 23px;
  font-weight: 700;
  position: absolute;
  left: 10px;
  top: 23px;
  text-align: center;
}

.movie-image {
  overflow: hidden;
  display: block;
  float: left;
  margin-top: -15px;
}

.movie-image img {
  width: 98px;
  height: 130px;
  vertical-align: top;
  border: 1px solid #c4c4c4;
  cursor: pointer;
}

.movie-detail {
  float: left;
  width: 450px;
  margin-top: -22px;
  margin-left: 10px;
  font-size: 13px;
  line-height: 10px;
}

.line-text {
  margin: 18px 0;
}

.movie-title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  padding: 30px 0;
  background: #fff;
}

.movie-button {
  background: #679c21;
  border-radius: 18px;
  color: #fff;
  width: 124px;
  height: 28px;
  font-size: 14px;
  line-height: 28px;
  overflow: hidden;
  text-align: center;
  float: left;
  letter-spacing: 2px;
  margin-top: 5px;
  margin-left: 5px;
}

#pagingBox {
  text-align: center;
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.last-button {
  padding: 0 4px;
  font-size: 20px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  box-sizing: border-box;
  text-align: center;
  background-color: #f4f4f5;
  cursor: pointer;
}

.last-button.actived {
  cursor: not-allowed;
  color: #c0c4cc;
}

.number-button {
  padding: 0 4px;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  box-sizing: border-box;
  text-align: center;
  background-color: #f4f4f5;
  margin-left: 15px;
  border-radius: 4px;
  cursor: pointer;
}

.number-button.actived {
  background-color: #409eff;
  color: #fff;
}

.next-button {
  padding: 0 4px;
  font-size: 20px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  box-sizing: border-box;
  text-align: center;
  background-color: #f4f4f5;
  margin-left: 15px;
}
</style>
